
<template>
  <div
    class="mainContent"
    id="mainContent"
  >
    <iframe
      id="mainIframe"
      class="mainIframe"
      src="/static/PrivacySatementText.html"
      width="100%"
      height="100%"
      frameborder="0"
    >

    </iframe>
    <el-row
      type="flex"
      justify="center"
    >
      <el-button
        size="mini"
        type="infor"
        v-if="showPhoneCheck"
        :disabled="timeOutShowPhoneCheck"
        @click="sendPhone"
      >短信验证{{timeOutShowPhoneCheck?'('+timeMessage+')':''}}</el-button>
      <el-button
        size="mini"
        type="success"
        @click="cancel"
      >关闭</el-button>
    </el-row>
    <el-dialog
      v-if="visible"
      :title="dialogTitle"
      width="400px"
      :visible.sync="visible"
      :append-to-body="true"
      @close="dialogClose"
      :close-on-click-modal="false"
    >
      <el-row>
        <el-col>验证码已发送至:{{phone}},请注意查收</el-col>
        <el-col>
          <el-input
            placeholder="请输入验证码"
            v-model="checkVeriodValue"
          >
          </el-input>
        </el-col>
        <el-col
          :span="24"
          align="center"
        >
          <el-button
            type="primary"
            size="mini"
            class="buttonStyle"
            @click="checkVeriod"
          >验证</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script> 
import { clientSendSmsPhone, clientCheckSendSmsPhone } from '@/api/after-sale/client/client';

export default {
  props: ["phone"],
  data () {
    return {
      showPhoneCheck: false,
      visible: false,
      dialogTitle: '',
      checkVeriodValue: '',//验证码
      timeOutShowPhoneCheck: false,
      timeMessage: 60,
    }
  },
  methods: {
    cancel(){
      this.$emit('setProtocol', false)
    },
    //验证
    checkVeriod () {
      if (this.checkVeriodValue) {
        clientCheckSendSmsPhone(this.phone, this.checkVeriodValue).then(res => {
          if (res.success) {
            this.$emit('setProtocol', true)
          }
        })
      } else {
        this.$message.error("请输入验证码")
      }
    },
    sendPhone () {
      let This = this;
      //弹出确认是有发送验证码，确认就直接发送验证码，然后弹出验证码校验框
      this.$confirm(`即将向手机号为${this.phone}的客户发送验证码。是否确定？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        clientSendSmsPhone(This.phone).then(res => {
          if (res.success) {
            This.visible = true;
            this.timeOutShowPhoneCheck = true;
            let interID = setInterval(() => {
              if (this.timeMessage == 0) {
                clearInterval(interID)
                this.timeOutShowPhoneCheck = false;
                this.timeMessage = 60;
              } else {
                this.timeMessage = this.timeMessage - 1;
              }
            }, 1000)
          }
        })
      })
    },
    dialogClose () {
      this.visible = false;
    }
  },
  mounted () {

    let dom = document.getElementById('mainIframe').contentWindow;
    dom.addEventListener('scroll', () => {
      if (dom.scrollY > window.document.body.scrollHeight) {
        this.showPhoneCheck = true;
      } else {
        this.showPhoneCheck = false;
      }
      // console.log('监听滚动', window.document.body.scrollHeight, dom.scrollY)
    })
  }
}
</script>
<style lang="scss" scoped>
.mainContent {
  // border: 1px solid red;
}
.mainIframe {
  height: 400px;
}
.buttonStyle {
  margin-top: 10px;
}
</style>